<template>
  <div class="me-code-list">
    <el-table :data="data" border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <template v-for="item in vueData.viewList">
        <el-table-column :label="item.name" :prop="item.hideCode.indexOf('sys') === 0 ? item.colCode : item.hideCode">
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      v-model:page="page"
      v-model:limit="vueData.limit"
      :page-sizes="pageSizes"
      :pager-count="pagerCount"
      @pagination="loadDataList"
    />
  </div>
</template>

<script name="CodeList" setup>
import { reactive, watchEffect } from 'vue';
import PropEnum from '@/store/enums/PropEnum';
import { SwitchEnum } from '@/store/enums/SwitchEnum';
const { dataType } = PropEnum;

const props = defineProps({
  total: {
    required: true,
    type: Number,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSizes: {
    type: Array,
    default() {
      return [20, 50, 100, 200, 1000];
    },
  },
  pagerCount: {
    type: Number,
    default: 5,
  },
  modelInfo: {
    required: true,
    type: Object,
  },
  data: {
    required: true,
    type: Array,
  }
});

const vueData = reactive({
  viewList: [],
  // 编辑页面显示
  codeEditShow: false,
  limit: 20,
  quickNum: 5,
});

const emit = defineEmits();
function loadDataList(pageData) {
  emit("load", pageData);
}


function handleEdit(idx, row) {
  console.log(idx);
  console.log(row);
}

function loadViewList(propList) {
  let viewList = [];
  for (let i = 0; i < propList.length; i++) {
    let it = propList[i];
    if (it.viewSw === SwitchEnum.OPEN) {
      console.log(it);
      viewList.push(it);
    }
  }
  vueData.viewList = viewList;
}

watchEffect(() => {
  if (props.modelInfo != null && props.modelInfo?.propList) {
    let propList = props.modelInfo.propList;
    loadViewList(propList);
  }
});
</script>

<style lang='scss' scoped>
.me-code-list {
  width: 100%;
}
</style>
